<template>
  <div class='list-wrap'>
    <div class='list-title'>
      <div v-for='item in titles'
          @click='changeList(item.id)'
          :key='item.id' class='title' :class='{active: item.id === currentIndex}'>
        {{ item.name }}
      </div>
    </div>
    <div class='list'>
      <div class='list-item' v-for='(item, index) in currentList' :key='item.name'
          @click='jump2Detail(currentIndex, item.id)'>
        <div class='cover'>
          <img :src='item.thumbnail' alt='' @load='loadedHandler(index)' v-show='item.loaded'>
          <div class='placeholder' v-show='!item.loaded'>
            <svg t="1616466296129" class="icon" viewBox="0 0 1121 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="2073" width="150" height="150">
              <path
                  d="M977.325513 0.00025H145.546928A143.829928 143.829928 0 0 0 1.449999 143.465179v678.318662a42.953979 42.953979 0 0 0 0 21.939989v36.810981A143.829928 143.829928 0 0 0 145.546928 1023.99974h831.754585A143.829928 143.829928 0 0 0 1121.399441 880.534811V143.587178A143.829928 143.829928 0 0 0 977.325513 0.00025zM145.571927 87.322207h831.753586a56.434972 56.434972 0 0 1 56.385972 56.069972V688.239907a965.857519 965.857519 0 0 0-113.089944-130.056935 103.776948 103.776948 0 0 0-88.027956-27.449986c-52.315974 7.484996-109.701945 50.828975-175.131912 132.226934a1046.621479 1046.621479 0 0 0-41.44298 55.191972C558.364722 638.948932 444.959778 492.680005 348.786826 425.300038a101.509949 101.509949 0 0 0-93.049953-14.041993c-35.397982 11.529994-69.867965 41.441979-104.947948 91.368955A825.220589 825.220589 0 0 0 88.769956 608.669947V143.465179a56.507972 56.507972 0 0 1 56.775972-56.142972z"
                  fill="#bfbfbf" p-id="2074"></path>
              <path
                  d="M743.51563 299.704101a101.826949 101.826949 0 1 0 101.826949-101.82695 101.826949 101.826949 0 0 0-101.826949 101.82695z"
                  fill="#bfbfbf" p-id="2075"></path>
            </svg>
          </div>
          <div class='flag'>VR</div>
        </div>
        <h3>{{ item.name }}</h3>
      </div>
    </div>
  </div>
</template>
<script>
import list from '../config';

export default {
  data() {
    return {
      list,
      titles: [
        {
          name: '飞越云南',
          id: 'feiYue'
        },
        {
          name: '锦绣云南',
          id: 'jinXiu'
        },
        {
          name: '特色节庆',
          id: 'jieQing'
        },
        {
          name: '民族村落',
          id: 'guZhen'
        }
      ],
      currentIndex: 'feiYue',
      currentList: []
    };
  },
  created() {
    let item = {};
    const currentData = list[this.currentIndex];
    for (let i = 0; i < currentData.length; i++) {
      item = {
        ...currentData[i],
        loaded: false
      };
      this.currentList.push(item);
    }
  },
  methods: {
    changeList(id) {
      this.currentIndex = id;
      this.currentList = list[this.currentIndex];
    },
    jump2Detail(type, id) {
      this.$router.push(`/detail?id=${id}&type=${type}`);
    },
    loadedHandler(index) {
      this.$set(this.currentList, index, {
        ...this.currentList[index],
        loaded: true
      });
    }
  }
};
</script>
